<template>
    <view class="my-detail"  > 
        <view class="card" >
            <image class="ava" mode="aspectFill" :src="logoBig" alt="" />
              <view class="userinfo" >
                <view class="name" >亚文 YAWEN</view>
                <view class="property" @click="propertyVisible = true" >
                    <view class="property-text" >庚金</view>
                    <image v-if="currentProperty.img" class="property-img" mode="aspectFill" :src="currentProperty.img" />
                    <image class="icon" mode="aspectFill" :src="addIcon" />
                </view>
            </view>
            <!-- 信息配置 -->
            <view class="astrolabe" >
              <view class="gender" >
                <nut-switch v-model="genderVal" active-text="男" inactive-text="女" />
              </view>
            </view>
        </view>
    </view>
    <nut-action-sheet v-model:visible="propertyVisible" :menu-items="propertys" @choose="chooseProper" />
</template>


<script lang='ts'  setup >
import addIcon from '@/static/common/add-icon.png'
import logoBig from '@/static/common/ava-my.png'
import { ref } from 'vue'

const propertys = ref([
  {name: '身强', img: '/static/my/shenqiang.png', value: 'shenqiang'},
  {name: '从强', img: '/static/my/congqiang.png', value: 'congqiang'},
  {name: '中和', img: '/static/my/zhonghe.png', value: 'zhonghe'},
  {name: '身弱', img: '/static/my/shenruo.png', value: 'shenruo'},
  {name: '从弱', img: '/static/my/congruo.png', value: 'congruo'}
])

const currentProperty = ref({
  name: '',
  img: '',
  value: ''
})

const genderVal = ref(true)

const propertyVisible = ref(false)

const chooseProper = (item: any) => {
  currentProperty.value = item
  propertyVisible.value = false
}

</script>


<style lang="scss" scoped >
@import '../../styles/index.scss';

.my-detail {
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 128rpx;
  box-sizing: border-box;
  .card {
    width: 100vw;
    min-height: 100vh;
    border-radius: 48rpx;
    background-color: $page-color;
    padding-bottom: 160rpx;
    .ava {
      width: 186rpx;
      height: 186rpx;
      border-radius: 50%;
      display: block;
      margin: 0 auto;
      margin-top: -93rpx;
    }
    .userinfo {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 48rpx;
      .name { }
      .property {
        display: flex;
        align-items: center;
        margin-top: 24rpx;
        .property-text {
          display: flex;
          margin-right: 12rpx;
          color: gold;
        }
        .property-img {
          width: 38rpx;
          height: 54rpx;
          display: block;
          margin-right: 12rpx;
        }
        .icon {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }
}
</style>
